<template>
  <div class="container">
    <div class="side-box">
      <ul>
        <li v-for="item in sideList" :key="item.path">
          <Side :data="item"></Side>
        </li>
      </ul>
    </div>
    <nuxt-child />
  </div>
</template>

<script>
import Side from '~/components/Side.vue'
export default {
  data() {
    return {
      sideList: [
        {
          name: 'Learn',
          path: '/explore/des',
          open: true,
          children: [
            {
              name: '介绍',
              path: '/explore/des',
            },
            {
              name: '安装',
              path: '/explore/install',
            },
            {
              name: '使用',
              path: '/explore/use',
            }
          ]
        },
        {
          name: 'Other',
          path: '/explore/des',
          open: false,
          children: [
            {
              name: '介绍',
              path: '/explore/des',
            },
            {
              name: '安装',
              path: '/explore/install',
            },
            {
              name: '使用',
              path: '/explore/use',
            }
          ]
        }
      ]
    }
  }
}
</script>
<style scoped lang="less">
.container {
  display: flex;

  .side-box {
    height: 100%;
    width: 200px;
    display: flex;
    flex-direction: column;
  }
}
</style>
